<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '推广统计',
			size: '70%'
		}"
		@close="close"
		hide-footer
	>
		<cl-crud ref="crud" @load="onLoad">
			<cl-pagefull @resize="onResize">
				<template #head>
					<el-row type="flex" align="middle">
						<cl-filter-group ref="filter" v-model="search">
							<cl-filter label="时间">
								<cl-date-picker
									v-model="search.date"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									style="width: 230px"
									:clearable="false"
									@change="refresh"
								/>
							</cl-filter>
							<cl-filter label="落地页">
								<cl-select
									v-model="search.id_ad"
									filterable
									placeholder="请选择"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in adplatList"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="渠道">
								<cl-select
									v-model="search.channel_id"
									filterable
									placeholder="请选择"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in channelList"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="类型">
								<cl-select
									v-model="search.type"
									placeholder="请选择"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option label="点击" value="1" />
									<el-option label="行为" value="2" />
								</cl-select>
							</cl-filter>
							<cl-filter label="客服">
								<cl-select
									v-model="search.user_id"
									filterable
									placeholder="请选择"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in operateList"
										:key="item.user_id"
										:label="item.user_name"
										:value="item.user_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="加微方式">
								<cl-select
									v-model="search.contact_type"
									filterable
									placeholder="请选择"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in contactTypeList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="加微号">
								<el-input
									v-model="search.contact_value"
									placeholder="请输入加微号"
									style="width: 160px"
									@change="refresh"
									clearable
								/>
							</cl-filter>
						</cl-filter-group>
					</el-row>
				</template>

				<el-row>
					<!-- 数据表格 -->
					<cl-table v-bind="table">
						<cl-empty slot="empty" />
					</cl-table>
				</el-row>
			</cl-pagefull>
		</cl-crud>
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";
import constant from "@/constant";
export default {
	data() {
		return {
			contactTypeList: constant.CONTACT_TYPE,
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						label: "代理商ID",
						prop: "suppile_id",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "落地页",
						prop: "ad_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "渠道",
						prop: "channel_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "客服",
						prop: "user_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "加微方式", prop: "contact_type_name", width: 150 },
					{
						label: "加微号",
						prop: "contact_value",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "类型", prop: "type_name", width: 150 },
					{ label: "访问IP", prop: "ip", width: 150 },
					{
						label: "访问城市",
						prop: "city",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "访问日期", prop: "addtime", width: 140 },
					{ label: "统计日期", prop: "statistics_date", width: 140 }
				],
				props: {
					maxHeight: 500
				}
			},
			search: {
				keyword: "",
				date: [
					dayjs()
						// .startOf("month")
						.format("YYYY-MM-DD"),
					dayjs()
						// .endOf("month")
						.format("YYYY-MM-DD")
				],
				begin_time: "", //开始时间
				end_time: "", //结束时间
				channel_id: "",
				user_id: "",
				contact_type: "",
				type: "",
				id_ad: "",
				contact_value: "",
				biz_id: ""
			},
			load: false,
			// 渠道列表
			channelList: [],
			// 落地页
			adplatList: [],
			operateList: []
		};
	},
	methods: {
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		open(data = {}) {
			const { biz_id } = data;
			this.search.biz_id = biz_id;
			this.getAdplatformList();
			this.getChannelList(biz_id);
			this.getOperate(biz_id);
			this.$refs.drawer.create();
		},
		close() {
			this.load = false;
			// console.log(this.$refs.filter);
			this.$refs.filter.reset();
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "advist"
					},
					pagination: {
						size: "pagesize"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.load = true;
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		// 渠道列表
		async getChannelList(biz_id) {
			this.channelList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id });
			this.channelList = data.filter(v => v.status != 2);
		},
		// 获取运营人
		async getOperate(biz_id) {
			this.operateList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				post: 4,
				biz_id
			});
			this.operateList = data;
		},
		// 获取落地页
		async getAdplatformList() {
			this.adplatList = [];
			const data = await this.$service.ad.adplatform();
			this.adplatList = data;
		}
	}
};
</script>
